﻿<div class="container">
  <div class="block-header">
    <h2>Media</h2>

    <ul class="actions">
      <li>
        <a href="">
          <i class="zmdi zmdi-trending-up"></i>
        </a>
      </li>
      <li>
        <a href="">
          <i class="zmdi zmdi-check-all"></i>
        </a>
      </li>
      <li class="dropdown" dropdown>
        <a href="" dropdown-toggle>
          <i class="zmdi zmdi-more-vert"></i>
        </a>

        <ul class="dropdown-menu dropdown-menu-right">
          <li>
            <a href="">Refresh</a>
          </li>
          <li>
            <a href="">Manage Widgets</a>
          </li>
          <li>
            <a href="">Widgets Settings</a>
          </li>
        </ul>
      </li>
    </ul>

  </div>

  <div class="card">
    <div class="card-header">
      <h2>Thumbnail <small>Extend Bootstrap's grid system with the thumbnail component to easily display grids of images, videos, text, and more.</small></h2>

      <ul class="actions">
        <li class="dropdown action-show" dropdown>
          <a href="" dropdown-toggle>
            <i class="zmdi zmdi-more-vert"></i>
          </a>

          <div class="dropdown-menu pull-right">
            <p class="p-20">
              You can put anything here
            </p>
          </div>
        </li>
      </ul>
    </div>

    <div class="card-body card-padding">
      <p class="f-500 c-black m-b-5">Basic Example</p>
      <small>By default, thumbnails are designed to showcase linked images with minimal required markup.</small>
      <br />
      <br />

      <div class="row">
        <div class="col-xs-6 col-md-2">
          <a href="#" class="thumbnail">
            <img src="img/300x200.gif" alt="">
          </a>
        </div>

        <div class="col-xs-6 col-md-2">
          <a href="#" class="thumbnail">
            <img src="img/300x200.gif" alt="">
          </a>
        </div>

        <div class="col-xs-6 col-md-2">
          <a href="#" class="thumbnail">
            <img src="img/300x200.gif" alt="">
          </a>
        </div>

        <div class="col-xs-6 col-md-2">
          <a href="#" class="thumbnail">
            <img src="img/300x200.gif" alt="">
          </a>
        </div>
      </div>

      <br />

      <p class="f-500 c-black m-b-5">Custom content</p>
      <small>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</small>

      <br />
      <br />

      <div class="row">
        <div class="col-sm-6 col-md-3">
          <div class="thumbnail">
            <img src="img/300x200.gif" alt="">
            <div class="caption">
              <h4>Thumbnail label</h4>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

              <div class="m-b-5">
                <a href="#" class="btn btn-sm btn-primary m-r-5" role="button">Button</a>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-3">
          <div class="thumbnail">
            <img src="img/300x200.gif" alt="">
            <div class="caption">
              <h4>Thumbnail label</h4>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

              <div class="m-b-5">
                <a href="#" class="btn btn-sm btn-primary m-r-5" role="button">Button</a>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-3">
          <div class="thumbnail">
            <img src="img/300x200.gif" alt="">
            <div class="caption">
              <h4>Thumbnail label</h4>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

              <div class="m-b-5">
                <a href="#" class="btn btn-sm btn-primary m-r-5" role="button">Button</a>
              </div>
            </div>
          </div>
        </div>
        <div class="col-sm-6 col-md-3">
          <div class="thumbnail">
            <img src="img/300x200.gif" alt="">
            <div class="caption">
              <h4>Thumbnail label</h4>
              <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>

              <div class="m-b-5">
                <a href="#" class="btn btn-sm btn-primary m-r-5" role="button">Button</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <h2>Lightbox <small>JQuery lightGallery is a lightweight jQuery lightbox gallery for displaying image and video gallery</small></h2>
    </div>

    <div class="card-body card-padding">
      <p class="f-500 c-black m-b-20">Images</p>

      <div class="lightbox row">
        <div data-src="media/gallery/1.jpg" class="col-sm-2 col-xs-6">
          <div class="lightbox-item">
            <img src="media/gallery/thumbs/1.jpg" alt="" />
          </div>
        </div>

        <div data-src="media/gallery/2.jpg" class="col-sm-2 col-xs-6" data-sub-html="<em><h3>This is a caption heading</h3><p>Here goes the description...</p></em>">
                    <div class="lightbox-item">
                        <img src="media/gallery/thumbs/2.jpg" alt=""  />
                    </div>
                </div>

        <div data-src="media/gallery/3.jpg" class="col-sm-2 col-xs-6">
          <div class="lightbox-item">
            <img src="media/gallery/thumbs/3.jpg" alt="" />
          </div>
        </div>

        <div data-src="media/gallery/4.jpg" class="col-sm-2 col-xs-6" data-sub-html="<em><h3>This is a caption heading</h3><p>Here goes the description...</p></em>">
                    <div class="lightbox-item">
                        <img src="media/gallery/thumbs/4.jpg" alt=""  />
                    </div>
                </div>

        <div data-src="media/gallery/5.jpg" class="col-sm-2 col-xs-6">
          <div class="lightbox-item">
            <img src="media/gallery/thumbs/5.jpg" alt="" />
          </div>
        </div>

        <div data-src="media/gallery/1.jpg" class="col-sm-2 col-xs-6" data-sub-html="<em><h3>This is a caption heading</h3><p>Here goes the description...</p></em>">
                    <div class="lightbox-item">
                        <img src="media/gallery/thumbs/6.jpg" alt=""  />
                    </div>
                </div>
      </div>

      <br /><br />

      <p class="f-500 m-b-20 c-black">Videos</p>
      <div class="lightbox row">
        <div data-src="https://www.youtube.com/watch?v=bZrrGF2MHIs" class="col-sm-2 col-xs-6">
          <div class="lightbox-item">
            <img src="media/gallery/thumbs/1.jpg" alt="" />
          </div>
        </div>

        <div data-src="https://www.youtube.com/watch?v=u8OZoyHvX78" class="col-sm-2 col-xs-6">
          <div class="lightbox-item">
            <img src="media/gallery/thumbs/2.jpg" alt="" />
          </div>
        </div>

        <div data-src="http://vimeo.com/1084537" class="col-sm-2 col-xs-6">
          <div class="lightbox-item">
            <img src="media/gallery/thumbs/3.jpg" alt="" />
          </div>
        </div>

        <div data-src="https://www.youtube.com/watch?v=6s7AkoQY5Xk" class="col-sm-2 col-xs-6">
          <div class="lightbox-item">
            <img src="media/gallery/thumbs/4.jpg" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <h2>Media Payer <small>HTML5 video and audio made easy. One file. Any browser. Same UI.</small></h2>
    </div>

    <div class="card-body card-padding">
      <div class="row">
        <div class="col-sm-6 m-b-20">
          <p class="f-500 c-black m-b-20">Basic Example</p>

          <video style="height: 100%; width: 100%" poster="media/big_buck_bunny.jpg" controls="controls" preload="none" data-media-element>
            <!-- id could be any according to you -->
            <source type="video/mp4" src="media/big_buck_bunny.mp4" />
          </video>
        </div>

        <div class="col-sm-6 m-b-20">
          <p class="f-500 c-black m-b-20">Multi-Codec with no JavaScript fallback player - Cross Browser</p>
          <video style="height: 100%; width: 100%" id="multiCodec" poster="media/big_buck_bunny.jpg" controls="controls" preload="none" data-media-element>
            <!-- id could be any according to you -->
            <!-- MP4 source must come first for iOS -->
            <source type="video/mp4" src="media/big_buck_bunny.mp4" />
            <!-- WebM for Firefox 4 and Opera -->
            <source type="video/webm" src="media/big_buck_bunny.webm" />
            <!-- OGG for Firefox 3 -->
            <source type="video/ogg" src="media/big_buck_bunny.ogv" />
            <!-- Fallback flash player for no-HTML5 browsers with JavaScript turned off -->
            <object type="application/x-shockwave-flash" data="media/flashmediaelement.swf" style="width: 100%; height: 100%;">
              <param name="movie" value="media/flashmediaelement.swf" />
              <param name="flashvars" value="controls=true&amp;poster=media/big_buck_bunny.jpg&amp;file=media/big_buck_bunny.mp4" />
              <!-- Image fall back for non-HTML5 browser with JavaScript turned off and no Flash player installed -->
              <img src="media/big_buck_bunny.jpg" alt="Media" title="No video playback capabilities" style="width: 100%; height: 100%;">
            </object>
          </video>
        </div>

        <!--
        <div class="col-md-6 m-b-20">
            <p class="f-500 c-black m-b-20">Youtube Video (Preview in server NOT local)</p>
            <video style="width: 100%;">
                <source src="http://www.youtube.com/watch?v=2CvtOUqd84o" type="video/youtube" >
            </video>
        </div>
        <div class="col-md-6 m-b-20">
            <p class="f-500 c-black m-b-20">Youtube Video (Preview in server NOT local)</p>
            <video style="width: 100%;">
                <source src="https://www.youtube.com/watch?v=E_DGd7QN290" type="video/youtube" >
            </video>
        </div>

        -->
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <h2>Carousel <small>A slideshow component for cycling through elements, like a carousel.</small></h2>
    </div>

    <div class="card-body card-padding" data-ng-controller="CarouselDemoCtrl">
      <carousel interval="myInterval">
        <slide ng-repeat="w in slides" active="slide.active">
          <img ng-src="media/carousel/{{w.img}}">
          <div class="carousel-caption" data-ng-if="w.title.length > 0">
            <h3>{{w.title}}</h3>
            <p>{{w.text}}</p>
          </div>
        </slide>
      </carousel>
    </div>
  </div>

  <div class="card">
    <div class="card-header">
      <h2>Responsive Embed <small>Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device.</small></h2>
    </div>

    <div class="card-body card-padding">
      <div class="row">
        <div class="col-sm-6 m-b-20">
          <p class="f-500 c-black m-b-20">4:3 Aspect Ratio</p>
          <div class="embed-responsive embed-responsive-4by3">
            <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/Kxe_RRonq0o"></iframe>
          </div>
        </div>
        <div class="col-sm-6">
          <p class="f-500 c-black m-b-20">16:9 Aspect Ratio</p>
          <div class="embed-responsive embed-responsive-16by9">
            <iframe class="embed-responsive-item" src="http://www.youtube.com/embed/aaZXDm3RXuo"></iframe>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
